<template>
  <div class="login">
    <div class="img">
      <img src="../../assets/images/logo.png"/>
    </div>
    <div class="form">
      <van-form @failed="onFailed">
        <van-cell-group inset>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field
            label="用户名"
            v-model="form.mobile"
            name="pattern"
            placeholder="用户名"
            :rules="[{ pattern, message: '请输入正确用户名' }]"
          />
          <van-field
            label="密码"
            v-model="form.password"
            name="pattern"
            placeholder="密码"
          />
        </van-cell-group>
        <div class="text" style="font-size:18px">
            <span>找回密码</span>
            <span @click="$router.push('/smslogin')">注册/验证码登录</span>
        </div>
        <div style="margin: 16px;font-size:18px">
          <button class="btn" @click="login">登录</button>
        </div>
      </van-form>
    </div>
    <p  style="font-size:18px">第三方登录</p>
    <div class="footer" style="font-size:18px">
        <div>
            <img src="../../assets/images/pay-wx.png" alt="">
            <span>微信登录</span>
        </div>
        <div>
            <img src="../../assets/images/QQ.png" alt="">
            <span>QQ登录</span>
        </div>
    </div>
  </div>
</template>
<script>
import {reactive,toRefs} from 'vue'
import {loginCode} from '../../request/home'
import {useRouter} from 'vue-router'
export default {
    setup(props) {
      let {push} = useRouter()
        const data = reactive({
            form:{
                mobile:'',
                password:'',
                type:1,
                client:1
            },
        })
        const pattern =/^(?:(?:\+|00)86)?1\d{10}$/
        const login = ()=>{
          loginCode(data.form).then(res=>{
            console.log(res);
            if(res.data.code==200){
              push('/mine')
              localStorage.setItem('msmktoken',res.data.data.remember_token)
            }
          })
        }
        return{...toRefs(data),pattern,login}
    }
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  margin-top: 100px;
  .img {
    width: 525px;
    margin:auto;
    margin-bottom: 50px;
    img {
      width: 525px;
      height: 115px;
    }
  }
  .form{
    width: 620px;
    margin: auto;
    .text{
        display: flex;
        justify-content: space-between;
        color: #999;
        margin: 20px 0;
        padding: 0 20px;
    }
    .btn{
        width: 100%;
        background: #fd6614;
        height: 60px;
        border-radius: 40px;
        outline: none;
        border: none;
        color: #fff;
    }
  }
  p{
    width: 100%;
    text-align: center;
  }
  .footer{
    display: flex;
    width: 600px;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    margin-top: 30px;
    div{
        flex: 1;
        text-align: center;
        img{
            vertical-align: middle;
            width: 54px;
            height: 42px;
            margin-right: 10px;
        }
    }
  }
}
</style>